<script lang="ts" setup>
  import { buildStyles, getSize } from "../utils.ts";

  interface AvatarProps {
    width?: number | string;
    height?: number | string;
    bgColor?: string;
  }

  const props = withDefaults(defineProps<AvatarProps>(), {
    width: 50,
    height: 50,
    bgColor: "#ccc",
  });

  const styles = buildStyles(() => ({
    width: getSize(props.width),
    height: getSize(props.height),
    backgroundColor: props.bgColor,
  }));
</script>

<template>
  <div class="umi-avatar" :style="styles">
    <umi-icon name="user"></umi-icon>
  </div>
</template>

<style lang="scss" scoped>
  .umi-avatar {
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
</style>
